<template>
    <view>
        <z-paging ref="paging" v-model="list" @query="upCallback">
            <template #top>
                <!-- 自定义导航栏 -->
                <u-navbar title="我的足迹" title-bold>
                    <template #right>
                        <view class="u-padding-right-20" @click="showdelete = true" v-if="!showdelete">
                            <text class="o-font-color-error">管理</text>
                        </view>
                    </template>
                </u-navbar>
            </template>
            <block v-for="(date, index) in list" :key="'date' + date.visitDate">
                <view class="date" v-if="date.footprints && date.footprints.length > 0">
                    <view>{{ $u.$timeUtil.formatDate(date.visitDate, 'MM-dd') }}</view>
                </view>

                <block v-for="(item, idx) in date.footprints" :key="'good' + item.visitDate + item.releaseId">
                    <view class="histroy-node" @click="go2Detail(item.releaseId)">
                        <img-cache :src="`${global.productImageUrl}${item.picId}/1`" width="150" height="150" class="u-flex-shrink" border-radius="10"></img-cache>
                        <view class="u-padding-20">
                            <view class="good-name">{{ item.releaseName }}</view>
                            <view class="good-price">￥{{ Number(item.userPrice).toFixed(2) }}</view>
                        </view>
                        <view v-if="showdelete" class="check-area" @click.stop="checkItem(item)"><u-checkbox :value="item.check" active-color="#fc4f75"></u-checkbox></view>
                    </view>
                </block>
            </block>
            <template #bottom>
                <view class="bottom-fixed-bar" v-if="showdelete">
                    <u-checkbox v-model="selectall" @change="all" active-color="#fc4f75">全选</u-checkbox>
                    <view class="u-flex">
                        <u-button type="info" :hair-line="false" class="btns cancel" @click="showdelete = false">取消</u-button>
                        <u-button type="p" :hair-line="false" class="btns delete" @click="removeRecords">删除</u-button>
                    </view>
                </view>
            </template>
        </z-paging>
    </view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import global from '@/config'

const paging = ref<any>(null)
const list = ref<Array<any>>([])
const showdelete = ref(false)
const selectall = ref(false)

const $u = computed(() => {
    return uni.$u
})

function upCallback(pageNo: number) {
    uni.$u.$api.GoodsApi.queryFootprintListPage({
        current: pageNo
    })
        .then((res: any) => {
            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

function go2Detail(id: string | number) {
    uni.$u.$MRouter.details.to({ id })
}

function checkItem(item: any) {
    item.check = !item.check
    list.value.forEach((m: any) => {
        if (m.footprints && m.footprints.some((item: any) => item.check == false)) {
            selectall.value = false
            return
        }
    })
    // this.$forceUpdate()
}

function all({ value }: { value: boolean }) {
    list.value.forEach((m: any) => {
        m.footprints?.forEach((item: any) => {
            item.check = value
        })
    })
}

function removeRecords() {
    let ids: Array<string> = []
    list.value.map(m => {
        m.footprints?.map((item: any) => {
            if (item.check) ids.push(item.id)
        })
    })
    uni.$u.$api.GoodsApi.delFootprint({ ids }).then(() => {
        // this.mescroll.resetUpScroll()
        paging.value?.reload()
        uni.$u.toast('删除成功!')
    })
}
</script>

<style scoped lang="scss">
.date {
    text-align: center;
    padding: 30rpx;
    font-size: 20rpx;
    color: #bcbcbc;
}

.histroy-node {
    display: flex;
    padding: 20rpx 30rpx;
    position: relative;
    background-color: $uni-bg-color;
    margin-bottom: 2rpx;

    .good-name {
        font-weight: bold;
    }

    .good-price {
        color: $cf-primary;
    }

    .check-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding-bottom: 30rpx;
        z-index: 99;
    }
}

.bottom-fixed-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: 30rpx;
    background-color: $uni-bg-color;
    z-index: 99999;

    .btns {
        width: 200rpx;
        border: none;
        border-radius: 0;
    }

    .cancel {
        background-color: #cccccc;
    }
}
</style>
